<template>
  <div class="GIFDigitizationContainer">
    <div class="centerContent">
      <p id="wrap"></p>
    </div>
  </div>
</template>

<script>
export default {
  name:'GIFDigitization',
  mounted() {
    this.setDigitization()
  },
  methods: {
    setDigitization() {
      const p = document.getElementById('wrap')
      p.innerText = Array(200).fill(Math.random() * 1234567890 + 1000000000).reduce((str, item) => str + parseInt(item).toString(2), '')
    }
  }
}
</script>

<style lang='less' scoped>
  .GIFDigitizationContainer {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    .centerContent {
      width: 90%;
      height: 90%;
      background: #000;
      overflow: hidden;
      p {
        height: 100%;
        color: transparent;
        background-clip: text;
        -webkit-background-clip: text;
        background-image: url("./pikachu.gif");
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
        mix-blend-mode: hard-light;
        filter: grayscale(1) invert(1);
        word-break: break-all;
      }
    }
  }
</style>